.homePagePanoramicMonitoringPageLayerComponent {
    position: absolute;
    padding: 16px 33px 0;
    pointer-events: none;
    width: 100%;
    height: calc(100vh - 64px - 32px);
    display: flex;
    justify-content: space-between;

    .homePagePanoramicMonitoringPageLayerComponent-panel {
        pointer-events: auto;
        width: 360px;
        background-color: rgba(9, 27, 35, 0.8);
        border: 1px solid rgba(23, 161, 230, 0.3);

        .homePagePanoramicMonitoringPageLayerComponent-panel__header {
            background-image: url("../../../../../../assets/image/标题背景框@2x.png");
            background-size: 100% 100%;
            width: fit-content;
            height: 30px;
            font-size: 14px;
            font-weight: 500;
            color: #B8D6E6;
            padding: 10px 24px 0 8px;
        }
    }


    .homePagePanoramicMonitoringPageLayerComponent-left {
        width: 360px;
        height: 100%;

        .homePagePanoramicMonitoringPageLayerComponent-left__layerComponentLeftTopComponent {
            height: 180px;

            .left-layerComponentLeftTopComponent__main {
                display: flex;
                align-items: center;
                padding: 12px 0 0 15px;

                .layerComponentLeftTopComponent-main__progress {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    font-size: 24px;
                    font-weight: 500;
                    color: #ffffff;

                    .main-progress__label {
                        font-size: 14px;
                        font-weight: 400;
                        color: #7a8f99;
                        margin-top: 8px;
                    }
                }

                .layerComponentLeftTopComponent-main__panel {

                    .main-panel__row {
                        width: 186px;
                        position: relative;
                        padding: 4px 0 4px 59px;
                        font-size: 14px;
                        font-weight: 400;
                        color: #B8D6E6;

                    }
                }
            }
        }

        .homePagePanoramicMonitoringPageLayerComponent-left__layerComponentLeftBottomComponent {
            margin-top: 8px;
            width: 100%;
            height: calc(100% - 180px - 8px);

            .left-layerComponentLeftBottomComponent__main {
                height: calc(100% - 40px - 18px - 18px);
                overflow-y: scroll;

                /*滚动条样式*/
                &::-webkit-scrollbar {
                    width: 0;
                }

                .layerComponentLeftBottomComponent-main__block {



                    .main-block__header {
                        font-size: 14px;
                        font-weight: 500;
                        color: #B8D6E6;
                        padding-left: 10px;
                        margin-bottom: 8px;
                    }

                    .main-block__main {

                        .block-main__row {
                            padding: 0 18px 0 8px;
                            width: 100%;
                            height: 40px;
                            background-color: rgba(23, 161, 230, 0.1);
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            font-size: 14px;
                            font-weight: 500;
                            color: #B8D6E6;
                            margin-bottom: 2px;

                            .main-row__idxBox {
                                width: 36px;
                                height: 25px;
                                border-radius: 2px;
                                color: #FFFFFF;
                                display: flex;
                                align-items: center;
                                padding-left: 8px;
                            }

                            .main-row__value {
                                color: #7ACCF5;
                            }
                        }
                    }

                }



            }
        }
    }

    .homePagePanoramicMonitoringPageLayerComponent-layerComponentCenterComponent {
        width: calc(100% - 360px - 360px);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .homePagePanoramicMonitoringPageLayerComponent-layerComponentCenterComponent__top {
            margin-left: 17px;
            display: flex;

            .layerComponentCenterComponent-top__zoomBox {
                display: flex;
                pointer-events: auto;

                .top-zoomBox__item {
                    width: 31px;
                    height: 32px;
                    background-color: rgba(15, 56, 77, 0.8);
                    box-shadow: 0px 6px 16px 0px rgba(9, 13, 15, 0.3), 0px 3px 6px 0px rgba(9, 13, 15, 0.2);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;

                    .zoomBox-item__font {
                        font-size: 18px;
                        color: #AAFFFC;
                        opacity: 0.5;
                    }
                }

                .top-zoomBox__enlargeItem {
                    border-right: 1px solid rgba(122, 143, 153, 0.5);
                    border-radius: 2px 0 0 2px;
                }

                .top-zoomBox__narrowItem {
                    border-left: 1px solid rgba(122, 143, 153, 0.5);
                    border-radius: 0 2px 2px 0;
                }
            }

            :global {

                // 选择框
                .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
                    pointer-events: auto;
                    margin-left: 8px;
                    width: 120px;
                    font-size: 14px;
                    font-weight: 400;
                    height: 32px;
                    background-color: rgba(23, 161, 230, 0.2);
                    border-radius: 2px;
                    border: 1px solid rgba(23, 161, 230, 0.3);
                }

                //选择框文字
                .ant-select-single.ant-select-show-arrow .ant-select-selection-item {
                    color: #B8D6E6;

                }

                // 选择框下拉箭头
                .ant-select-arrow {
                    color: #7A8F99;
                }

                // 选择框hover
                .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer):hover .ant-select-selector {
                    border: 1px solid rgba(23, 161, 230, 1);
                }

                //  选择框选择完成
                .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) .ant-select-selector {
                    box-shadow: none;
                }

            }
        }

        .homePagePanoramicMonitoringPageLayerComponent-layerComponentCenterComponent__bottom {
            margin-left: 8px;
            pointer-events: auto;
            display: flex;
            border: 1px solid rgba(23, 161, 230, 0.3);
            width: fit-content;

            .layerComponentCenterComponent-bottom__content {

                width: 120px;
                height: 60px;
                background: rgba(23, 161, 230, 0.1);
                border-radius: 1px;

                display: flex;
                flex-wrap: wrap;

                .bottom-content__block {
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    font-weight: 400;
                    color: #8FB8CC;
                    margin: 0 8px;

                    .content-block__radius {
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        margin-right: 8px;
                    }
                }
            }

            .layerComponentCenterComponent-bottom__switch {
                width: 24px;
                height: 60px;
                background: rgba(23, 161, 230, 0.2);
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;

                .bottom-switch__image {
                    width: 12px;
                    height: 12px;
                }
            }
        }

    }

    .homePagePanoramicMonitoringPageLayerComponent-right {
        width: 360px;
        height: 100%;

        .homePagePanoramicMonitoringPageLayerComponent-right__layerComponentRightTopComponent {
            width: 100%;
            height: 540px;

            .right-layerComponentRightTopComponent__header {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                margin-right: 8px;

                .layerComponentRightTopComponent-header__site {
                    width: 100px;
                }

                :global {

                    // 选择框
                    .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
                        width: 200px;
                        font-size: 14px;
                        font-weight: 400;
                        height: 32px;
                        background-color: rgba(23, 161, 230, 0.2);
                        border-radius: 2px;
                        border: 1px solid rgba(23, 161, 230, 0.3);
                    }

                    //选择框文字
                    .ant-select-single.ant-select-show-arrow .ant-select-selection-item {
                        color: #B8D6E6;

                    }

                    // 选择框下拉箭头
                    .ant-select-arrow {
                        color: #7A8F99;
                    }

                    // 选择框hover
                    .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer):hover .ant-select-selector {
                        border: 1px solid rgba(23, 161, 230, 1);
                    }

                    //  选择框选择完成
                    .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) .ant-select-selector {
                        box-shadow: none;
                    }

                }
            }

            .right-layerComponentRightTopComponent__main {
                .layerComponentRightTopComponent-main__radioGroup {
                    display: flex;
                    justify-content: center;
                    margin: 9px 8px;

                    :global {
                        .ant-radio-wrapper .ant-radio-inner {
                            width: 16px;
                            height: 16px;
                            border-radius: 8px;
                            background-color: rgba(0, 0, 0, 0);
                            border: 1px solid rgba(122, 143, 153, 0.5)
                        }


                        .ant-radio-wrapper .ant-radio-checked .ant-radio-inner {
                            width: 16px;
                            height: 16px;
                            border-radius: 8px;
                            background-color: rgba(0, 0, 0, 0);
                            border: 1px solid #177DDC;
                        }

                        .ant-radio-wrapper .ant-radio-checked .ant-radio-inner::after {
                            background-color: #17A1E6;
                        }

                        .ant-radio-wrapper {
                            font-size: 14px;
                            font-weight: 400;
                            color: #B8D6E6;
                        }
                    }
                }

                .layerComponentRightTopComponent-main__echartsTop {
                    width: 100%;
                    // height: 224px;
                    border-top: 1px solid rgba(23, 161, 230, 0.3);
                }

                .layerComponentRightTopComponent-main__echartsBottom {
                    width: 100%;
                    // height: 235px;
                    border-top: 1px solid rgba(23, 161, 230, 0.3);
                }

                .layerComponentRightTopComponent-main__tooltip {
                    padding-right: 36px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #8FB8CC;

                    .main-tooltip__row {
                        display: flex;
                        align-items: center;
                        font-weight: 500;
                        color: #FFFFFF;

                        .tooltip-row__legend {
                            width: 10px;
                            height: 10px;
                            border-radius: 3px;
                            background: linear-gradient(360deg, rgba(23, 161, 230, 0.2) 0%, rgba(23, 161, 230, 0.8) 100%);
                            margin-right: 12px;
                        }
                    }
                }
            }
        }

        .homePagePanoramicMonitoringPageLayerComponent-right__layerComponentRightBottomComponent {
            margin-top: 8px;
            width: 100%;
            height: calc(100% - 540px - 8px);

            .right-layerComponentRightBottomComponent__main {
                height: calc(100% - 40px);
                padding: 9px 10px 16px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .layerComponentRightBottomComponent-main__tableRow {
                    background-color: rgba(23, 161, 230, 0.1);
                }

                .layerComponentRightBottomComponent-main__seeMore {
                    display: flex;
                    align-items: center;
                    font-size: 16px;
                    font-weight: 400;
                    color: #17A1E6;
                    cursor: pointer;

                    .main-seeMore__image {
                        width: 20px;
                        height: 20px;
                        margin-left: 176px;
                    }
                }

                :global {

                    // 表格和表头
                    .ant-table-wrapper .ant-table,
                    .ant-table-wrapper .ant-table-thead>tr>th {
                        background-color: rgba(0, 0, 0, 0);
                        font-size: 16px;
                        font-weight: 400;
                        color: #B8D7E6;
                    }

                    // 表头
                    .ant-table-wrapper .ant-table-thead>tr>th {
                        font-weight: 500;
                    }

                    // 表头和行
                    .ant-table-wrapper .ant-table-thead>tr>th,
                    .ant-table-wrapper .ant-table-tbody>tr>td {

                        padding: 7px 11px;

                    }

                    // 行悬浮
                    .ant-table-wrapper .ant-table-tbody>tr>td.ant-table-cell-row-hover {
                        background: rgba(0, 0, 0, 0);
                    }

                    // 空状态
                    .ant-empty {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        height: fit-content;
                        height: calc(100vh - 64px - 16px - 32px - 540px - 8px - 143px);
                    }

                    // 空状态文字
                    [class*=" ant-empty"] [class^="ant-empty"] {

                        color: #7A8F99;
                    }

                    // 空状态hover
                    .ant-table-wrapper .ant-table-tbody>tr.ant-table-placeholder:hover>td {
                        background-color: rgba(0, 0, 0, 0);
                    }

                }

            }
        }

    }

}

:global {

    // 下拉框
    .ant-select-dropdown.layerComponentCenterComponent-top__selectDropdown {
        background-color: rgba(15, 56, 77, 0.9);
        box-shadow: 0px 6px 16px 0px rgba(9, 13, 15, 0.3), 0px 3px 6px 0px rgba(9, 13, 15, 0.2);
        border-radius: 2px;
        border: 1px solid rgba(23, 161, 230, 1);
        padding: 0;
        width: 120px !important;
        min-width: 120px !important;
        top: 112px !important;

        // 下拉框文字
        .ant-select-item-option-content {
            font-size: 14px;
            font-weight: 400;
            color: #B8D6E6;

        }

        // 下拉框选中选项
        .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
            background-color: rgba(0, 0, 0, 0);
            border-radius: 0%;
        }
    }

    // 下拉框
    .ant-select-dropdown.layerComponentRightTopComponent-header__selectDropdown {
        background-color: rgba(15, 56, 77, 0.9);
        box-shadow: 0px 6px 16px 0px rgba(9, 13, 15, 0.3), 0px 3px 6px 0px rgba(9, 13, 15, 0.2);
        border-radius: 2px;
        border: 1px solid rgba(23, 161, 230, 1);
        padding: 0;

        // 下拉框文字
        .ant-select-item-option-content {
            font-size: 14px;
            font-weight: 400;
            color: #B8D6E6;

        }

        // 下拉框选中选项
        .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
            background-color: rgba(23, 161, 230, 0.5);
            border-radius: 0%;
        }
    }
}